<template>
	<div id="revisePassword">
		<div class="password_login">
			<p class="Title">修改登录密码</p>
			<p class="cue">定时修改登录密码，可加强账号安全</p>
		</div>
		<div class="revise_form">
			<div class="revise_item">
				<p>旧密码：</p>
				<input @blur="oldWrite = false" :class="oldWrite?'old nowirte':'old'" type="password" placeholder="请输入旧密码" v-model="reviseForm.oldPassword" />
			</div>
			<div class="revise_item">
				<p>新密码：</p>
				<input @blur="newWrite = 0" :class="newWrite == 1||newWrite == 2?'new nowirte':'new'" type="password" placeholder="请输入新密码" v-model="reviseForm.newPassword" />
			</div>
			<div class="revise_item">
				<p>重复新密码：</p>
				<input :class="newWrite == 2?'again nowirte':'again'" type="password" placeholder="请重新输入新密码" v-model="again" />
			</div>
			<input @click="revise" type="button" value="确认更改" />
		</div>
	</div>
</template>

<script>
export default {
	name: 'revisePassword',
	data:function(){
		return{
			reviseForm:{
				oldPassword: '',//旧密码
				newPassword: ''//新密码
			},
			again:'',//重复新密码
			oldWrite:false,//旧密码是否没输入
			newWrite:0,//1新密码没输入  2两次密码不一致
		}
	},
	methods:{
		revise:function(){
			var _this = this;
			if(!$.trim(_this.reviseForm.oldPassword)){
				$('.old').focus();
				_this.oldWrite = true;
			}else if(!$.trim(_this.reviseForm.newPassword)){
				$('.new').focus();
				_this.newWrite = 1;
			}else if($.trim(_this.reviseForm.newPassword)!=$.trim(this.again)){
				$('.new').focus();
				_this.newWrite = 2;
			}else{
				var postData = _this.$qs.stringify(_this.reviseForm )
				_this.$axios.post('/agent/autho/updatePassword',postData).then(function(res){
					var data = res.data;
					if(data.message=="succ"){
						_this.$alert('1',data.result,function(){
							_this.$router.push({path:'/IDoperation/login'})
						});
					}else{
						alert(data.result);
					}
				}).catch(function (error) {
				    console.log(error);
				});
			}
		}
	}
}
</script>

<style scoped>
#revisePassword{
	width: 1030px;
	background-color: #fff;
	padding: 30px;
	padding-bottom: 10px;
	box-sizing: border-box;
}
.Title{
	font-size: 20px;
	color: #545454;
}
.cue{
	color: #FF464E;
	margin-top: 10px;
	padding-bottom: 10px;
	border-bottom: 1px solid #E6E6E6;
}
.revise_item{
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: 20px;
}
.revise_item p{
	width: 86px;
	color: #545454;
}
.revise_item input{
	height: 30px;
	border: 1px solid #E6E6E6;
	width: 200px;
	padding-left: 10px;
	box-sizing: border-box;
}
input[type='button']{
	width: 120px;
	height: 30px;
	display: block;
	background-color: #FF464E;
	color: #FFFFFF;
	margin: 0 auto;
	border: none;
	margin-top: 30px;
}
input.nowirte{
	border: 1px solid #FF464E;
}
</style>